import React,  { useState, useEffect } from 'react'
import 'moment/locale/zh-cn'
import locale from 'antd/es/date-picker/locale/zh_CN';
import PropTypes from 'prop-types'
import moment from 'moment'
import { Input, DatePicker, Button  } from 'antd'
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import "../static/style/components/searchTmp.scss"
// import { log } from 'util';
const { RangePicker } = DatePicker;
function SearchTmp(prop) {
  const { slotTmp } = prop 
  const [searchTxt, setSearchTxt] = useState()
  const [searchTime, setSearchTime] = useState(undefined)
  async function resetSearch(){
    await setSearchTxt()
    await setSearchTime("")
    
    prop.resetSearch()
    // console.log('999999',searchTime);
    
  }
  function disabledDate(current) {
    // Can not select days before today and today
    return current && current > moment().endOf('day');
  }
  function searchData(){
    // console.log(searchTxt,'000000',searchTime)
    prop.searchData(searchTxt,searchTime)
  }
  return (
    <div className="SearchTmp">
      <RangePicker locale={locale} value={searchTime} defaultValue={ searchTime } disabledDate={ disabledDate } onChange={(dateString) => setSearchTime(dateString)} renderExtraFooter={() => 'extra footer'} />
      <Input placeholder="标题检索" value={ searchTxt } className="searchName" onChange={e => { setSearchTxt(e.target.value); }} />
      { slotTmp? slotTmp:''}
      <Button type="primary" danger onClick={resetSearch} icon={<RedoOutlined />}>重 置</Button>
      <Button type="primary" style={{marginLeft:'15px'}} onClick={searchData} icon={<SearchOutlined />}>搜 索</Button>
    </div>
  )
}

SearchTmp.propTypes = {
}
// SearchTmp.defaultProps = {
//   total: 0
// }
export default SearchTmp


